<!-- 我的查询 -->

<template>
  <WebSearch class="noMargin">
    <template #btn>
      <ParamRadio bind="statisticType" :dict="DICT.CATEGORY" isBtn />
      <BtnDownload :disabled="!list.length" @click="toExport" />
    </template>

    <ParamSelect label="日期选择" bind="dateType" :dict="DICT.DATE" hasLabel noClear narrow @change="changeDate" />

    <ParamDate v-if="param.dateType === 1" v-bind="dateProps" />
    <ParamMonth v-else-if="param.dateType === 3" v-bind="dateProps" @change="changeDate" />
    <ParamYear v-else-if="param.dateType === 4" v-bind="dateProps" />

    <ParamSelect bind="energyType" :dict="DICT.TYPE" noClear narrow @change="changeType" />
  </WebSearch>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MySearch',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 日期属性
     */
    dateProps() {
      const { DICT, param } = this
      return {
        label: `统计${CORE.dict(DICT.DATE, param.dateType, 2)}`,
        bind: 'statisticTime',
        history: true,
        noClear: true,
        narrow: true,
        lastSecond: true,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换日期
     */
    changeDate() {
      const { param } = this
      const { dateType: type, statisticTime: time } = param
      if (type === 1) param.xData = Array(24).fill().map((_, i) => `${i + 1}时`)
      else if (type === 3) param.xData = Array(CORE.monthDays(time)).fill().map((_, i) => `${i + 1}日`)
      else if (type === 4) param.xData = Array(12).fill().map((_, i) => `${i + 1}月`)
      else param.xData = []
    },

    /**
     * 切换类型
     */
    changeType() {
      this.param.monitorPointSiteId = []
    },

    /**
     * 点击导出
     */
    toExport() {
      this.refTable.export(this.GETTER.fileName, null, 60)
    },
  },
}
</script>
